<template>
  <div>
    <span>是否处理：</span>
    <select v-model="ha">
      <option value="0">全部</option>
      <option value="1">已处理</option>
      <option value="2">未处理</option>
    </select>
    <button class="screen-btn" @click="screenMessage">筛选</button>

    <input type="text" class="search-username-text"
           placeholder="可输入用户名"
           v-model="un"
           oninput="value=value.replace(/[^\d]/g,'')">

    <button class="search-btn" @click="searchMessage">搜索</button>
  </div>
</template>

<script>
  export default {
    name: "Neck",
    props: {
      username: {
        type: String,
        default: ''
      },
      handle: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        un: this.username,
        ha: this.handle,
      }
    },
    methods: {
      screenMessage() { // 筛选商品类目
        this.$emit('screen', {
          un: this.un,
          ha: this.ha
        })
      },
      searchMessage() { // 搜索商品类目
        this.$emit('search', {
          un: this.un,
          ha: this.ha
        })
      }
    }
  }
</script>

<style scoped>
  div {
    position: relative;
    /*background-color: yellow;*/
  }
  div select {
    width: 120px;
    height: 30px;
    margin-right: 10px;

    border-radius: 4px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
  }
  div .screen-btn {
    height: 30px;
    width: 60px;
    color: white;
    border-radius: 4px;

    outline: none;
    border: none;
    background-color: rgb(23, 162, 184);/*007bff*/
  }
  div .screen-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }

  div .search-username-text {
    /*position: absolute;*/

    width: 200px;
    height: 28px;
    transform: translateX(40px);
  }
  div .search-info-text {
    width: 200px;
    height: 28px;
    transform: translateX(60px);
  }
  div .search-btn {
    height: 32px;
    width: 100px;
    color: white;
    border-radius: 4px;
    background-color: rgb(23, 162, 184);/*007bff*/
    transform: translateX(70px);

    outline: none;
    border: none;
  }
  div .search-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .add-btn {
    position: absolute;

    margin-top: 15px;

    height: 30px;
    width: 90px;
    color: white;
    border-radius: 4px;
    /*background-color: #28a745;*/

    outline: none;
    border: none;
  }
  div .add-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .root-category {
    right: 0;
    background-color: #ff5600;
  }
  div .goods-category {
    right: 160px;
    background-color: #28a745;
  }
</style>